import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';

import Login from '../views/Login';

import Cinema from '../views/Cinema';
import Center from '../views/Center';
import NotFound from '../views/NotFound';

import Film from '../views/Films';
import NowPlaying from '../views/Films/NowPlaying';
import ComingSoon from '../views/Films/ComingSoon';
import FilmDetail from '../views/Films/Detail';

import Auth from './Auth';
import City from '../views/City';

const index = (props) => {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/login"
          element={<Login />}
        />

        <Route
          path="/film"
          element={<Film />}>
          <Route
            path="nowPlaying"
            element={<NowPlaying />}
          />
          <Route
            path="comingSoon"
            Component={ComingSoon}
          />
          {/* 动态路由 */}
          <Route
            path="detail/:id"
            Component={FilmDetail}
          />
          {/* 重定向 Navigate */}
          <Route
            path=""
            element={<Navigate to="/film/nowPlaying" />}
          />
        </Route>
        <Route
          path="/cinema"
          Component={Cinema}
        />
        <Route
          path="/city"
          Component={City}
        />
        <Route
          path="/center"
          element={
            <Auth>
              <Center />
            </Auth>
          }
        />

        {/* 重定向 Navigate */}
        <Route
          path="/"
          element={<Navigate to="/film" />}
        />
        {/* 404 */}
        <Route
          path="*"
          Component={NotFound}
        />
      </Routes>
      {props.children}
    </BrowserRouter>
  );
};

export default index;
